<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人设置</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <!-- 标签页图标 -->
    <link rel="shortcut icon" href="/images/icon/menu_title_1.jpg" type="image/x-icon" />
</head>
<script src="/js/layui/layui.all.js" charset="utf-8"></script>
<script src="/js/jquery.js" charset="utf-8"></script>
<script src="/js/localStorage.js" charset="utf-8"></script>
<body>
<div class="layui-form" style="margin-top: 20px;">
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 140px;">商品展示排序规则：</label>
        <div class="layui-input-block">
            <input id="sort_1" type="radio" name="sort" value="asc" title="创建时间正序" >
            <input id="sort_2" type="radio" name="sort" value="desc" title="创建时间倒序">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 140px;">开启邮件推送提醒：</label>
        <div class="layui-input-block">
            <input lay-filter="switch" style="width: 100px;" type="checkbox" id="emailOpen" lay-skin="switch"
                   lay-text="ON|OFF">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 140px;">采集服务使用期限：</label>
        <div class="layui-input-block">
            <input style="width: 50%;border:none;color: #FD482C" id="expirationTimeFormat" type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="mui-button-row">
        <button id="save" type="button" class="layui-btn layui-btn-primary" style="width: 100%;">保存设置</button>
    </div>
</div>
</body>

<script>

    var emailOpenValue;
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        //初始化选中
        var result = getUserInfo();
        if ("desc" == result.shopSort)
            $("#sort_2").attr("checked", "checked");
        else
            $("#sort_1").attr("checked", "checked");
        if ("on"==result.emailPush)
            $("#emailOpen").attr("checked", "checked");

        $("#expirationTimeFormat").val(result.expirationTimeFormat);
        emailOpenValue=result.emailPush;

        var element = layui.element;
        var form = layui.form;
        form.render();
        element.init();

        form.on('switch(switch)', function (data) {
            if (data.elem.checked) {
                emailOpenValue = "on";
            } else {
                emailOpenValue = "off";
            }
        })
    });

    $("#save").click(function () {
        save();
    });

    function save() {
        var sort = $('input[name="sort"]:checked').val();

        $.ajax(serverURL + '/user/updateUserSetter', {
            type: "post",
            async: false,
            dataType: 'json', //服务器返回json格式数据
            data: {
                userId: getLocalObject("user").id,
                shopSort: sort,
                emailPush: emailOpenValue
            },
            success: function (data) {
                if (isNotBlank(data.data)) {
                    layer.msg("规则保存成功");
                } else {
                    layer.msg(data.meta);
                }
            },
            error: function (e) {
                console.log(e)
            }
        });
    }

    function getUserInfo() {
        var result;
        $.ajax(serverURL + '/user/userInfo', {
            type: "get",
            async: false,
            dataType: 'json', //服务器返回json格式数据
            data: {
                userId: getLocalObject("user").id
            },
            success: function (data) {
                result = data.data;
            },
            error: function (e) {
                console.log(e)
            }

        });
        return result;
    }
</script>
</html>